import React, { useState, useEffect } from 'react';
import "./home.scss";
import RouterView from '../../router/RouterView';
import { Link } from 'react-router-dom';
import HomeFoot from '../../components/homeFooter';

import { UserOutlined, BellOutlined } from '@ant-design/icons';
import { Layout, Menu, Breadcrumb } from 'antd';
const { SubMenu } = Menu;
const { Header, Content, Footer } = Layout;

//设置导航列表
const navList = [
    {
        path: "/home/post",
        text: "岗位"
    },
    {
        path: "/home/project",
        text: "项目"
    },
    {
        path: "/home/training",
        text: "实训"
    },
    {
        path: "/home/interview",
        text: "面试",
        children: [
            {
                path: "/home/interview/record",
                text: "面试记录"
            },
            {
                path: "/home/interview/myRecord",
                text: "我的面试记录"
            },
            {
                path: "/home/interview/recordRanking",
                text: "面试排行榜"
            }
        ]
    },
    {
        path: "/home/ask",
        text: "问答",
        children: [
            {
                path: "/home/ask/askList",
                text: "问答列表"
            },
            {
                path: "/home/ask/myAsk",
                text: "我的问答"
            }
        ]
    },
]

const Home = (props) => {
    //设置一个导航信息的state
    const [rout, setRout] = useState([]);

    //获取地址栏导航信息
    const routs = window.location.pathname;
    //从本地储存获取当前导航的key
    const navInd = sessionStorage.getItem('meunInd') ? sessionStorage.getItem('meunInd') : "1";
    //设置当前导航的key
    const [meunInd, setMeunInd] = useState(navInd);

    useEffect(() => {
        //获取路由信息
        const routFun = () => {
            //截取为数组
            let breadcrumbList = routs.split("/");
            //设置rout的state
            setRout(breadcrumbList);
        };
        routFun();
    }, [routs]);

    //设置username
    const [username, setUser] = useState("");

    useEffect(() => {
        const getUsername = () => {
            //获取username
            let userN = window.sessionStorage.getItem('username');
            //将username转为汉字并设置username
            setUser(window.decodeURI(userN));
        }
        getUsername();
    }, []);

    return (
        <div id="home">
            <Layout>
                <Header style={{ position: 'fixed', zIndex: 1, width: '100%' }}>
                    <div className="logo" />
                    <Menu theme="dark" mode="horizontal" defaultSelectedKeys={[meunInd]} onClick={({ key }) => {
                        setMeunInd(key);
                        //将当前导航的key存入本地
                        sessionStorage.setItem("meunInd", key);
                    }}>
                        {
                            navList && navList.map((item, index) => {
                                if (item.children) {
                                    return <SubMenu key={`${index + 1}`} title={item.text}>
                                        {
                                            item.children && item.children.map((item1, index1) => {
                                                return <Menu.Item key={`setting${index1}:${index + 1}`}>
                                                    <Link to={item1.path}>{item1.text}</Link>
                                                </Menu.Item>
                                            })
                                        }
                                    </SubMenu>
                                }
                                return <Menu.Item key={`${index + 1}`}>
                                    <Link to={item.path}>{item.text}</Link>
                                </Menu.Item>
                            })
                        }
                        <Menu.Item className="news" key="news">
                            <Link to="#"><BellOutlined /></Link>
                        </Menu.Item>
                        <SubMenu key="SubMenuUser" className="subMUser" icon={<UserOutlined />} title={username}>
                            <Menu.Item key="setting:1">
                                <Link to="/home/my">个人中心</Link>
                            </Menu.Item>
                            <Menu.Item key="setting:2" onClick={() => {
                                //清除本地的username
                                window.sessionStorage.removeItem("username");
                                //清除本地的token
                                window.sessionStorage.removeItem("token");
                                //跳转登录页
                                props.history.push("/login");
                            }}>退出</Menu.Item>
                        </SubMenu>
                    </Menu>
                </Header>
                <Content className="site-layout" style={{ padding: '0 50px', marginTop: 64 }}>
                    <Breadcrumb style={{ margin: '16px 0' }}>
                        {
                            rout && rout.map((item, index) => {
                                return <Breadcrumb.Item key={index}>{item}</Breadcrumb.Item>
                            })
                        }
                    </Breadcrumb>
                    <div className="site-layout-background" style={{ minHeight: 380 }}>
                        <RouterView routerList={props.routerList} />
                    </div>
                </Content>
                <Footer style={{ textAlign: 'center' }}>
                    <HomeFoot />
                </Footer>
            </Layout>
        </div>
    );
};

export default Home;